TeamStats.renderTeamStats - Code Metrics - Inspection of "Merge branch 'release/3.1.0'" - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 7003f8...9bda5a )

by Kevin Van

created 2021-12-09 12:27 UTC

TeamStats.renderTeamStats B

↳ Parent: src/components/TeamStats.tsx

Complexity

Conditions

Size

Total Lines	62
Code Lines	58

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	58
dl	0
loc	62
rs	8.3745
c	0
b	0
f	0
cc	3

How to fix Long Method

import axios from "axios"
import { graphql, useStaticQuery } from "gatsby"
import React, { FunctionComponent, useEffect, useState } from "react"

import Icon from "../components/Icon"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconCleansheet from "../images/i_cleansheet.png"
import iconGoal from "../images/i_goal.png"
import { translateGameResult } from "../scripts/helper"
import Card from "./Card"
import Spinner from "./Spinner"
import "./TeamStats.scss"

const TeamStats: FunctionComponent<TeamStatsProps> = ({ teamId = 1 }: TeamStatsProps) => {
  const [data, setData] = useState<TeamStatsDataObject>()

  const {
    site: {
      siteMetadata: { kcvvPsdApi },
    },
  }: TeamStatsData = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          kcvvPsdApi
        }
      }
    }
  `)

  useEffect(() => {
    async function getData() {
      const response = await axios.get(`${kcvvPsdApi}/stats/team/${teamId}`)
      setData(response.data)
    }
    getData()
  }, [kcvvPsdApi, teamId])

  return (
    <section className={`team__stats__wrapper`}>
      {data !== null || <Spinner />}
      {data && renderTeamStats(data)}
      {data && renderTeamSquadStats(data)}
    </section>
  )
}

const renderTeamStats = ({ extraStats }: TeamStatsDataObject): JSX.Element => (
  <Card className={`team_stats__team`} title="Statistieken">
    <span className={`team_stats__label`}>Gespeeld</span>
    <span>{extraStats.gamesPlayed}</span>
    <span className={`team_stats__label`}>Gewonnen</span>
    <span>{extraStats.gamesWon}</span>
    <span className={`team_stats__label`}>Gelijk</span>
    <span>{extraStats.gamesEqual}</span>
    <span className={`team_stats__label`}>Verloren</span>
    <span>{extraStats.gamesLost}</span>
    <span className={`team_stats__label`}>Doelpunten</span>
    <span>
      {extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen
    </span>
    <span className={`team_stats__label`}>Cleansheets</span>
    <span>{extraStats.cleanSheets}</span>
    <span className={`team_stats__label`}>Gele kaarten</span>
    <span>{extraStats.yellowCards}</span>
    <span className={`team_stats__label`}>Rode kaarten</span>
    <span>{extraStats.redCards}</span>
    <span className={`team_stats__label`}>Wedstrijden niet gescoord</span>
    <span>{extraStats.notScored}</span>
    <span className={`team_stats__label`}>Grootste overwinning</span>
    <span>
      {extraStats.biggestWin.result} tegen {extraStats.biggestWin.opponent}
    </span>
    <span className={`team_stats__label`}>Grootste verlies</span>
    <span>
      {extraStats.biggestLoss.result} tegen {extraStats.biggestLoss.opponent}
    </span>
    <span className={`team_stats__label`}>Meeste doelpunten</span>
    <span>
      {extraStats.mostGoals.result} tegen {extraStats.mostGoals.opponent}
    </span>
    <span className={`team_stats__label`}>Topschutters</span>
    <ul className={`team_stats__list`}>
      {extraStats.topscorers
        .sort((a, b) => b.value - a.value)
        .map((player, i) => (
          <li key={i}>
            {player.firstName} {player.lastName} ({player.value})
          </li>
        ))}
    </ul>
    <span className={`team_stats__label`}>Laatste wedstrijden</span>
    <span>
      {extraStats.gameStreak.map((game, i) => (
        <span
          key={i}
          className={`team_stats__streak team_stats__streak--${game.result.toLowerCase()}`}
          title={`${translateGameResult(game.result)}`}
        >
          {game.result.charAt(0) !== `E` ? game.result.charAt(0) : `D`}
        </span>
      ))}
    </span>
  </Card>
)

const renderTeamSquadStats = ({ squadPlayerStatistics }: TeamStatsDataObject) => {
  squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)

  return (
    <Card className="team_stats__players" title="Spelers" hasTable={true}>
      <table>
        <thead>
          <tr>
            <th className={`table__column__string`}>Speler</th>
            <th className={`table__column__number show-for-medium`}>
              <span title="Wedstrijden gespeeld">P</span>
            </th>
            <th className={`table__column__number`}>
              <span title="Wedstrijden gewonnen">W</span>
            </th>
            <th className={`table__column__number`}>
              <span title="Wedstrijden gelijkgespeeld">D</span>
            </th>
            <th className={`table__column__number`}>
              <span title="Wedstrijden verloren">L</span>
            </th>
            <th className={`table__column__number`}>
              <img src={iconCardYellow} title="Gele kaart" alt="Gele kaart" className="table__header__icon" />
            </th>
            <th className={`table__column__number`}>
              <img src={iconCardRed} title="Rode kaart" alt="Rode kaart" className="table__header__icon" />
            </th>
            <th className={`table__column__number`}>
              <img
                src={iconGoal}
                title="Doelpunt(en) gescoord"
                alt="Doelpunt(en) gescoord"
                className="table__header__icon"
              />
            </th>
            <th className={`table__column__number show-for-medium`}>
              <img src={iconCleansheet} title="Cleansheets" alt="Cleansheets" className="table__header__icon" />
            </th>
            <th className={`table__column__number`}>
              <span title="Minuten gespeeld">
                <Icon icon="fa-clock-o" />
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          {squadPlayerStatistics
            .sort((a, b) => b.minutes - a.minutes)
            .map(function (player) {
              return (
                <tr>
                  <td className={`table__column__string`}>
                    {player.firstName} {player.lastName}
                  </td>
                  <td className={`table__column__number show-for-medium`}>{player.gamesPlayed}</td>
                  <td className={`table__column__number`}>{player.gamesWon}</td>
                  <td className={`table__column__number`}>{player.gamesEqual}</td>
                  <td className={`table__column__number`}>{player.gamesLost}</td>
                  <td className={`table__column__number`}>{player.yellowCards}</td>
                  <td className={`table__column__number`}>{player.redCards}</td>
                  <td className={`table__column__number`}>{player.goals}</td>
                  <td className={`table__column__number show-for-medium`}>{player.cleanSheets}</td>
                  <td className={`table__column__number`}>{player.minutes || `0`}'</td>
                </tr>
              )
            })}
        </tbody>
      </table>
    </Card>
  )
}

export default TeamStats


1			import axios from "axios"
2			import { graphql, useStaticQuery } from "gatsby"
3			import React, { FunctionComponent, useEffect, useState } from "react"
4
5			import Icon from "../components/Icon"
6			import iconCardRed from "../images/i_card_red.png"
7			import iconCardYellow from "../images/i_card_yellow.png"
8			import iconCleansheet from "../images/i_cleansheet.png"
9			import iconGoal from "../images/i_goal.png"
10			import { translateGameResult } from "../scripts/helper"
11			import Card from "./Card"
12			import Spinner from "./Spinner"
13			import "./TeamStats.scss"
14
15			const TeamStats: FunctionComponent<TeamStatsProps> = ({ teamId = 1 }: TeamStatsProps) => {
16			const [data, setData] = useState<TeamStatsDataObject>()
17
18			const {
19			site: {
20			siteMetadata: { kcvvPsdApi },
21			},
22			}: TeamStatsData = useStaticQuery(graphql`
23			{
24			site {
25			siteMetadata {
26			kcvvPsdApi
27			}
28			}
29			}
30			`)
31
32			useEffect(() => {
33			async function getData() {
34			const response = await axios.get(`${kcvvPsdApi}/stats/team/${teamId}`)
35			setData(response.data)
36			}
37			getData()
38			}, [kcvvPsdApi, teamId])
39
40			return (
41			<section className={`team__stats__wrapper`}>
42			{data !== null \|\| <Spinner />}
43			{data && renderTeamStats(data)}
44			{data && renderTeamSquadStats(data)}
45			</section>
46			)
47			}
48
49			const renderTeamStats = ({ extraStats }: TeamStatsDataObject): JSX.Element => (
50			<Card className={`team_stats__team`} title="Statistieken">
51			<span className={`team_stats__label`}>Gespeeld</span>
52			<span>{extraStats.gamesPlayed}</span>
53			<span className={`team_stats__label`}>Gewonnen</span>
54			<span>{extraStats.gamesWon}</span>
55			<span className={`team_stats__label`}>Gelijk</span>
56			<span>{extraStats.gamesEqual}</span>
57			<span className={`team_stats__label`}>Verloren</span>
58			<span>{extraStats.gamesLost}</span>
59			<span className={`team_stats__label`}>Doelpunten</span>
60			<span>
61			{extraStats.goalsScored} voor / {extraStats.goalsAgainst} tegen
62			</span>
63			<span className={`team_stats__label`}>Cleansheets</span>
64			<span>{extraStats.cleanSheets}</span>
65			<span className={`team_stats__label`}>Gele kaarten</span>
66			<span>{extraStats.yellowCards}</span>
67			<span className={`team_stats__label`}>Rode kaarten</span>
68			<span>{extraStats.redCards}</span>
69			<span className={`team_stats__label`}>Wedstrijden niet gescoord</span>
70			<span>{extraStats.notScored}</span>
71			<span className={`team_stats__label`}>Grootste overwinning</span>
72			<span>
73			{extraStats.biggestWin.result} tegen {extraStats.biggestWin.opponent}
74			</span>
75			<span className={`team_stats__label`}>Grootste verlies</span>
76			<span>
77			{extraStats.biggestLoss.result} tegen {extraStats.biggestLoss.opponent}
78			</span>
79			<span className={`team_stats__label`}>Meeste doelpunten</span>
80			<span>
81			{extraStats.mostGoals.result} tegen {extraStats.mostGoals.opponent}
82			</span>
83			<span className={`team_stats__label`}>Topschutters</span>
84			<ul className={`team_stats__list`}>
85			{extraStats.topscorers
86			.sort((a, b) => b.value - a.value)
87			.map((player, i) => (
88			<li key={i}>
89			{player.firstName} {player.lastName} ({player.value})
90			</li>
91			))}
92			</ul>
93			<span className={`team_stats__label`}>Laatste wedstrijden</span>
94			<span>
95			{extraStats.gameStreak.map((game, i) => (
96			<span
97			key={i}
98			className={`team_stats__streak team_stats__streak--${game.result.toLowerCase()}`}
99			title={`${translateGameResult(game.result)}`}
100			>
101			{game.result.charAt(0) !== `E` ? game.result.charAt(0) : `D`}
102			</span>
103			))}
104			</span>
105			</Card>
106			)
107
108			const renderTeamSquadStats = ({ squadPlayerStatistics }: TeamStatsDataObject) => {
109			squadPlayerStatistics.sort((a, b) => b.minutes - a.minutes)
110
111			return (
112			<Card className="team_stats__players" title="Spelers" hasTable={true}>
113			<table>
114			<thead>
115			<tr>
116			<th className={`table__column__string`}>Speler</th>
117			<th className={`table__column__number show-for-medium`}>
118			<span title="Wedstrijden gespeeld">P</span>
119			</th>
120			<th className={`table__column__number`}>
121			<span title="Wedstrijden gewonnen">W</span>
122			</th>
123			<th className={`table__column__number`}>
124			<span title="Wedstrijden gelijkgespeeld">D</span>
125			</th>
126			<th className={`table__column__number`}>
127			<span title="Wedstrijden verloren">L</span>
128			</th>
129			<th className={`table__column__number`}>
130			<img src={iconCardYellow} title="Gele kaart" alt="Gele kaart" className="table__header__icon" />
131			</th>
132			<th className={`table__column__number`}>
133			<img src={iconCardRed} title="Rode kaart" alt="Rode kaart" className="table__header__icon" />
134			</th>
135			<th className={`table__column__number`}>
136			<img
137			src={iconGoal}
138			title="Doelpunt(en) gescoord"
139			alt="Doelpunt(en) gescoord"
140			className="table__header__icon"
141			/>
142			</th>
143			<th className={`table__column__number show-for-medium`}>
144			<img src={iconCleansheet} title="Cleansheets" alt="Cleansheets" className="table__header__icon" />
145			</th>
146			<th className={`table__column__number`}>
147			<span title="Minuten gespeeld">
148			<Icon icon="fa-clock-o" />
149			</span>
150			</th>
151			</tr>
152			</thead>
153			<tbody>
154			{squadPlayerStatistics
155			.sort((a, b) => b.minutes - a.minutes)
156			.map(function (player) {
157			return (
158			<tr>
159			<td className={`table__column__string`}>
160			{player.firstName} {player.lastName}
161			</td>
162			<td className={`table__column__number show-for-medium`}>{player.gamesPlayed}</td>
163			<td className={`table__column__number`}>{player.gamesWon}</td>
164			<td className={`table__column__number`}>{player.gamesEqual}</td>
165			<td className={`table__column__number`}>{player.gamesLost}</td>
166			<td className={`table__column__number`}>{player.yellowCards}</td>
167			<td className={`table__column__number`}>{player.redCards}</td>
168			<td className={`table__column__number`}>{player.goals}</td>
169			<td className={`table__column__number show-for-medium`}>{player.cleanSheets}</td>
170			<td className={`table__column__number`}>{player.minutes \|\| `0`}'</td>
171			</tr>
172			)
173			})}
174			</tbody>
175			</table>
176			</Card>
177			)
178			}
179
180			export default TeamStats
181

soniCaH / KCVV-Elewijt-Gatsby

Push — master ( 7003f8...9bda5a )

TeamStats.renderTeamStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like